<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>


	<body>
		
		<canvas id="myCanvas" width="1200" height="600"> </canvas>


		<script type="text/javascript">
			
			var numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				[
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0 ,0],
					[0, 0, 0, 0],
					[0,1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				], //9
			];
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			var text = [1,5,10,3,2,10,1,2];
			
			var img= new Image();
			img.src="img/13.gif";
			var date = new Date;
			var balls=[];
            img.onload =function(){
			
			setInterval(function(){
				ctx.clearRect(0,0,1300,600);
				ctx.drawImage(img,0,0);
				
                var time = new Date();
                if (time.getSeconds()!= date.getSeconds()){
                	date = time;//秒数改变
                	//添加小球
                	for(var i = 0;i<50;i++){              		
                	
                	var vx = (Math.random()*5) + 5;
                	if(Math.random()> 0.5){
                		vx=-vx;
                	}
                	var vy = (Math.random()*10) + 5;
                	if (Math.random()>0.5){
                		vy =-vy;
                	}
                	var R = parseInt(Math.random()*256);
	    	        var g = parseInt(Math.random()*256);
	    	        var b = parseInt(Math.random()*256);
	    	        var a = Math.random();
	    	        var color ="rgba("+R+","+g+","+b+","+a+")";
	    	        balls.push([930,120,10,vx,vy,color]);
                }
                }
                
                text[0] = parseInt(date.getHours()/10);
                text[1] = date.getHours()%10;
                text[3] = parseInt(date.getMinutes()/10);
                text[4] = date.getMinutes()%10;
                text[6] = parseInt(date.getSeconds()/10);
                text[7] = date.getSeconds()%10;
				for(var i=0;i< text.length;i++){
					
					if(i==2){
						drawNumber(i*130+100-10,110,text[i]);						
					}
					else if(i==3||i==4){
						drawNumber(i*130+100-60,110,text[i]);						
					}
					else if(i==5){
						drawNumber(i*130+100-80,110,text[i]);	}
					else if(i==6||i==7){
						drawNumber(i*130+100-140,110,text[i]);						
					}					
					else {
						drawNumber(i*130+100,110,text[i]);	
					}
				
				}
				drawBalls();
			},33);
			};
			
					
			function drawBalls(){
				
				for(var i=0;i<balls.length;i++){
					ctx.beginPath();
					ctx.fillStyle=balls[i][5];
					ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI);
					ctx.fill();
					balls[i][0]=balls[i][0]+balls[i][3];
					balls[i][1]=balls[i][1]+balls[i][4];
					balls[i][4]=balls[i][4]+3;
				}
			}
		
			function drawNumber(arcx,arcy,num){
				var number1 = numbers[num];
                var r=5;         	
//          	var R=parseInt(Math.random()*256);
//				var g=parseInt(Math.random()*256);
//				var b=parseInt(Math.random()*256);
//				ctx.fillStyle="rgb("+R+","+g+","+b+")";    
//             
            for(var i=0;i<number1.length;i++){
            	 var y=arcy+i*2*r;             	           	
//          	
            for(var j=0;j<number1[i].length;j++){
            	if(number1[i][j]==1){
//          
                     ctx.beginPath();
                     var x = arcx + 2 * j * r;
                     ctx.arc(x, y, r, 0, 2 * Math.PI);
                     ctx.fill();
                   }
                     }
                     }

                  }
        
		</script>
	</body>


